
<style>
.shipper-formitem {
  width: 280px;
}
</style>

<template>
    <Form ref="form" :model="formData" :label-width="120" class="clearfix">
        <Row>
		<Col span="12">
		<FormItem prop="contactName" label="发货方名称:" :rules="required">
			<Input  v-model="formData.contactName"/>
		</FormItem>
		</Col>
		<Col span="12">
		<FormItem  label="发货方CODE:" >
			<Input v-model="formData.code"/>
		</FormItem>
		</Col>
		<Col span="12">
		<FormItem prop="active" label="状态:" :rules="required">
			<Select  v-model="formData.active">
				<Option value="1">启用</Option>
				<Option value="0">禁用</Option>
			</Select>
		</FormItem>
		</Col>
        <Col span="12" v-if="showOrg">
		<FormItem prop="organizationId" label="组织:" :rules="required">
            <Select  v-model="formData.organizationId" filterable clearable>
				<Option v-for="item in getSysAllList" :value="item.value" :key="item.value">{{item.label}}</Option>
			</Select>
		</FormItem>
		</Col>
		<Col span="12">
		<FormItem prop="countrycode" label="国家:" :rules="required">
            <Select v-model="formData.countrycode" filterable clearable>
                <Option v-for="(item,index) in getCountryList" :key="index" :value="item.value">{{item.label}}</Option>
            </Select>
		</FormItem>
		</Col>
		<Col span="12">
		<FormItem prop="state" label="州:" :rules="required">
			<Input  v-model="formData.state"/>
		</FormItem>
		</Col>
		<Col span="12">
		<FormItem prop="city" label="城市:" :rules="required">
			<Input  v-model="formData.city"/>
		</FormItem>
		</Col>
		<Col span="12">
		<FormItem prop="zipcode" label="邮编:" :rules="required">
			<Input  v-model="formData.zipcode"/>
		</FormItem>
		</Col>
		<Col span="12">
		<FormItem prop="addressLine1" label="详细地址:" :rules="required">
			<Input  v-model="formData.addressLine1"  type="textarea" :autosize="{minRows: 2,maxRows: 6}"/>
		</FormItem>
		</Col>
		<Col span="12">
		<FormItem prop="contactPhone" label="联系电话:" :rules="required">
			<Input   v-model="formData.contactPhone"/>
		</FormItem>
		</Col>
		<Col span="12">
		<FormItem label="备注:" >
			<Input  v-model="formData.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}"/>
		</FormItem>
		</Col>
		<Col span="24" class="text-right">
			<Button type="primary" @click="submit">保存</Button>
			<Button class="margin-left-10" @click="close">返回</Button>
			<Spin size="large" fix v-if="loading"></Spin>
		</Col>
        </Row>
	</Form>

</template>

<script>
import { HttpSaveShipper, HttpSaveShipperManage } from '@/service/api/views';
import {mapGetters,mapState} from 'vuex'

export default {
    props:['ismanage'],
	data() {
		return {
			show: false,
			loading: false,
			formData: {
				contactName: '',
				code: '',
				active: '0',
				countrycode: '',
				state: '',
				city: '',
				zipcode: '',
				addressLine1: '',
				contactPhone: '',
				remark: '',
                countries:[],
			},
			required: [{
                required: true,
                message: "该信息不能为空,请填写"
            }],
		};
    },
    created(){
        this.showOrg = this.$route.name === 'addressmanageShipper'
    },
    computed:{
        ...mapGetters('dictionary', ['getCountryList','getSysAllList']),
    },
	methods: {
		close() {
			this.$emit('on-close')
		},
		async submit() {
			let valid = await this.$refs['form'].validate();
			if (!valid) return;
            this.loading = true;
            if(this.ismanage === 1){
                HttpSaveShipperManage(this.formData).then(res => {
                    this.close();
                    this.$emit('on-update');
                    this.$Message.success(res.message);
                }, err => {
                    this.$Message.error(err.message);
                }).finally(result => {
                    this.loading = false;
                })
            }else{
                HttpSaveShipper(this.formData).then(res => {
                    this.close();
                    this.$emit('on-update');
                    this.$Message.success(res.message);
                }, err => {
                    this.$Message.error(err.message);
                }).finally(result => {
                    this.loading = false;
                })
            }
		},
    },
    
};
</script>

